<template>
  <div class="min-project">
    <el-form>
      <el-form-item>
        <el-button size="small"
          type="primary"
          class="fr"
          :disabled="data.length == 4"
          @click="_add()">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-table class="easy-table"
          border
          :data="data"
          style="width:50%">
          <el-table-column label="编号"
            width="50">
            <template slot-scope="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="轮播图片">
            <template slot-scope="scope">
              <img :src="scope.row.img"
                width="100"
                style="vertical-align:top;margin:5px 0"
                alt="">
            </template>
          </el-table-column>
          <el-table-column label="底色色号">
            <template slot-scope="scope">
              <!-- <el-color-picker :disabled="true" v-model="scope.row.colour"></el-color-picker> -->
              <div class="color">
                <span :style="{'backgroundColor':scope.row.colour}"
                  class="color-div"></span>
                <span :style="{'color':scope.row.colour}">{{scope.row.colour}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="图片跳转链接">
            <template slot-scope="scope">
              <p v-if="scope.row.site">{{scope.row.site}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button type="text"
                @click="_delete(scope.row.id)">删除</el-button>
              <el-button type="text"
                @click="_edit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 编辑、新增 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="620px">
      <el-form label-width="100px">
        <el-form-item label="轮播图片"
          required>
          <UploadPic v-model="imgUrl">
            图片建议尺寸700*220像素，JPG、PNG图片格式，1M以内
          </UploadPic>
        </el-form-item>
        <el-form-item label="底色色号" required>
          <el-color-picker v-model="colour"></el-color-picker>
        </el-form-item>
        <el-form-item label="图片跳转链接">
          <el-input placeholder="请输入图片跳转链接"
            v-model="site"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadPic from "@/components/common/uploadPic";

import {
  getBannerList,
  updateBanner,
  deleteBanner
} from "@/public/js/banner.js";
export default {
  components: {
    UploadPic
  },
  props: {},
  data() {
    return {
      data: [],
      title: "新增",
      dialogVisible: false,
      imgUrl: "",
      site: "",
      id: "",
      colour: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    _edit(data) {
      this.dialogVisible = true;
      this.title = "编辑";
      this.imgUrl = data.img;
      this.site = data.site;
      this.id = data.id;
      this.colour = data.colour;
    },
    _add(data) {
      this.dialogVisible = true;
      this.title = "新增";
      this.imgUrl = "";
      this.site = "";
      this.id = "";
      this.colour = "";
    },
    init() {
      getBannerList().then(res => {
        this.data = res.data.bannerAdmins;
      });
    },
    sure() {
      if (!this.imgUrl) {
        this.$message.error("请选择图片");
        return false;
      } else if (!this.colour) {
        this.$message.error("请选择背景底色");
        return false;
      }
      updateBanner({
        id: this.id,
        img: this.imgUrl,
        site: this.site,
        colour: this.colour
      }).then(res => {
        if (!res.data.errCode) {
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.init();
        }
      });
    },
    //删除
    _delete(id) {
      this.$confirm("是否继续该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteBanner({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.init();
          }
        });
      });
    }
  },
  created() {
    this.init();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.pic-uploader {
  .el-upload {
    padding: 20px;
  }
}
.color {
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-div {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}
</style>